<template>
	<view>
		<myhead left="1" home="1"></myhead>
		<view class="tit">
			<view>{{statusTxt}}</view>
			<view>98.3%的订单会在5分钟内完成<span v-if="list.status==0 || list.status==1">{{list.status==0?'剩余付款时间'+yzmBtnTxt:yzmBtnTxt}}</span></view>
		</view>
		<view class="content">
			<view>购买USDT</view>
			<view>
				<view>总价</view>
				<view class="money">￥{{list.sumAmount}}</view>
			</view>
			<view>
				<view>单价</view>
				<view>￥{{list.amount}}</view>
			</view>
			<view>
				<view>数量</view>
				<view>{{list.sumNumber}}USDT</view>
			</view>
			<view>
				<view>订单号</view>
				<view>{{list.outTradeNo}}</view>
			</view>
			<view>
				<view>买家昵称</view>
				<view>{{list.sellNickName}}</view>
			</view>
			<view>
				<view>卖家昵称</view>
				<view>{{list.buyerName}}</view>
			</view>
			<block v-if="list.status!=0 || (list.status==0 && list.swtichCardSeconds<=0)">
				<block v-if="buyerAccountId==userInfo.id">
					<view>
						<view>卖家姓名</view>
						<view>{{list.bankUserName}}</view>
					</view>
					<view>
						<view>银行卡号</view>
						<view>{{list.bankNo}}</view>
					</view>
					<view>
						<view>开户银行</view>
						<view>{{list.bankName}}</view>
					</view>
				</block>
				<block v-if="buyerAccountId!=userInfo.id">
					<view>
						<view>收款卡号</view>
						<view>{{card?card:list.bankNo}}</view>
					</view>
				</block>
			</block>
			<block v-if="buyerAccountId==userInfo.id">
				<view>
					<view>到账数量</view>
					<view>{{list.obtainNum}}</view>
				</view>
				<view>
					<view>手续费</view>
					<view>{{list.tradeFee}}</view>
				</view>
			</block>
		</view>
		<block v-if="list.status==0">
			<view class="btnList">
				<block v-if="buyerAccountId==userInfo.id">
					<view @tap="qxBtn">取消订单</view>
					<view class="fkBtn" @tap="fkBtn">{{buyerAccountId==userInfo.id?list.swtichCardSeconds>0?yzmBtnTxt1:'我已付款成功':list.swtichCardSeconds>0?yzmBtnTxt1:'我已收到付款'}}</view>
				</block>
				<block v-else>
					<view class="fkBtn" v-if="list.swtichCardSeconds>0" @tap="fkBtn">{{buyerAccountId==userInfo.id?list.swtichCardSeconds>0?yzmBtnTxt1:'我已付款成功':list.swtichCardSeconds>0?yzmBtnTxt1:'我已收到付款'}}</view>
				</block>
			</view>
		</block>
		<block v-if="list.status==1">
			<block v-if="buyerAccountId==userInfo.id">
				<view class="btnList">
					<view @tap="qxBtn">取消订单</view>
					<view @tap="btn">申诉</view>
				</view>
			</block>
			<block v-else>
				<view class="fkBtn" @tap="fkBtn">{{buyerAccountId==userInfo.id?'我已付款成功':'我已收到付款'}}</view>
			</block>
		</block>
	</view>
</template>

<script>
	const http = require('../../utils/http.js');
	export default {
		data() {
			return {
				tradeId:null,
				list:'',
				statusTxt:'',
				buyerAccountId:null,
				userInfo:null,
				yzmBtnTxt1:null,
				yzmBtnTxt:null,
				card:null,
				cardId:null,
				cardListTxt:[]
			}
		},
		onLoad(options) {
			uni.showLoading({
			    title: '加载中'
			});
			if(uni.getStorageSync('userInfo')){
				this.userInfo=uni.getStorageSync('userInfo')
			}else{
				this.userInfo=null
			}
			if(options.buyerAccountId){
				this.buyerAccountId=options.buyerAccountId
			}
			if(options.tradeId){
				//console.log(options.tradeId)
				this.tradeId=options.tradeId
			}else{
				uni.showToast({
				  title: '非法操作',
				  icon: 'none',
				  duration:1000
				});
				uni.hideLoading();
				setTimeout(function () {
				    uni.switchTab({
				        url: '/pages/home/home'
				    });
				}, 1000);
			}
		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			http.post('/api/purchase/getTradeDetail',{tradeId:this.tradeId}).then(res => {
				uni.showToast({
				  title: res.message,
				  icon: 'none',
				  duration:1000
				});
				http.get('/api/user/getMyBank').then(res1 => {
					if (res1.code == 200 && res1.result) {
						this.cardList=res1.result
						for(var i=0;i<res1.result.length;i++){
							this.cardListTxt[i]=res1.result[i].bankName
							if(this.cardId==res1.result[i].id){
								this.card=res1.result[i].bankName
							}
						}
					}
				})
				if (res.code == 200 && res.result) {
					this.list=res.result
					if(this.buyerAccountId!=this.userInfo.id){
						this.list.swtichCardSeconds=this.list.swtichCardSeconds-5
					}
					if(this.buyerAccountId==this.userInfo.id){
						this.yzmBtnTxt1 = this.list.swtichCardSeconds+'秒后可付款';
					}else{
						this.yzmBtnTxt1 = '更换银行卡时间剩余'+this.list.swtichCardSeconds+'秒';
					}
					if(res.result.leftPaySeconds>0){
						this.yzmBtnTxt = this.list.leftPaySeconds+'秒';
					}
					this.clock1 = setInterval(this.doLoop1, 1000); //一秒执行一次
					this.clock = setInterval(this.doLoop, 1000); //一秒执行一次
					if(res.result.status==0){//未支付
						if(this.buyerAccountId==this.userInfo.id){
							this.statusTxt='确定付款后--点击--我已付款成功'
						}else{
							this.statusTxt='买家尚未付款'
						}
					}
					if(res.result.status==1){//已支付
						if(this.buyerAccountId==this.userInfo.id){
							this.statusTxt='等待卖家确认收款'
						}else{
							this.statusTxt='买家已付款'
						}
					}
					if(res.result.status==2){//确认收款
						this.statusTxt='订单交易完成'
					}
				}
				uni.hideLoading();
			})
		},
		methods: {
			btn:function(){
				uni.showToast({
				  title: '暂为开放该功能',
				  icon: 'none',
				  duration:1000
				});
			},
			qxBtn:function(){
				let that=this
				uni.showModal({
				    title: '取消订单',
				    content: '请确认您是否决定取消订单',
				    success: function (res) {
				        if (res.confirm) {
				            http.post('/api/purchase/cancelTrade',{tradeId:that.tradeId}).then(res => {
				            	uni.showToast({
				            	  title: res.message,
				            	  icon: 'none',
				            	  duration:1000
				            	});
				            	setTimeout(function () {
				            	    uni.switchTab({
				            	        url: '/pages/home/home'
				            	    });
				            	}, 1000);
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			fkBtn:function(){
				let that=this
				if(this.buyerAccountId==this.userInfo.id){//买方
					if(this.list.swtichCardSeconds<=0){
						uni.showModal({
						    title: '付款确认',
						    content: '请确认您已向卖家付款--恶意点击将直接冻结账户',
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
									http.post('/api/purchase/comfirmPayment',{tradeId:that.tradeId}).then(res1 => {
										uni.showToast({
										  title: res1.message,
										  icon: 'none',
										  duration:1000
										});
										if(res1.code==200){
											setTimeout(function () {
											    uni.switchTab({
											        url: '/pages/home/home'
											    });
											}, 1000);
										}
									})
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
				}else{//卖方
					if(this.list.swtichCardSeconds>0){
						let that=this
						//console.log(that.cardListTxt)
						var cardList=that.cardList
						if(that.cardList.length){
							uni.showActionSheet({
							    itemList: that.cardListTxt,
							    success: function (res) {
							        //console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
									that.card=that.cardListTxt[res.tapIndex]
									that.cardId=cardList[res.tapIndex].id
									//console.log(that.cardId)
									http.post('/api/purchase/changeBankCard',{bankId:that.cardId,tradeId:that.tradeId}).then(res => {
										uni.showToast({
										  title: res.message,
										  icon: 'none',
										  duration:1000
										});
									})
							    },
							    fail: function (res) {
							        console.log(res.errMsg);
							    }
							});
						}
					}else{
						uni.showModal({
						    title: '确认收款',
						    content: '请确认您已收到买家付款',
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
									http.post('/api/purchase/comfirmReceivePayment',{tradeId:that.tradeId}).then(res => {
										uni.showToast({
										  title: res.message,
										  icon: 'none',
										  duration:1000
										});
										if(res.code==200){
											setTimeout(function () {
											    uni.switchTab({
											        url: '/pages/home/home'
											    });
											}, 1000);
										}
									})
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
				}
			},
			doLoop:function(){
				if(this.list.leftPaySeconds > 0){
					this.list.leftPaySeconds -= 1;
					this.yzmBtnTxt = this.list.leftPaySeconds+'秒';
				}else{
					if(this.list.leftPaySeconds == 0){
						http.post('/api/purchase/getTradeDetail',{tradeId:this.tradeId}).then(res => {
							if (res.code == 200 && res.result) {
								this.list=res.result
								if(this.buyerAccountId!=this.userInfo.id){
									this.list.swtichCardSeconds=this.list.swtichCardSeconds-5
								}
								if(this.buyerAccountId==this.userInfo.id){
									this.yzmBtnTxt1 = this.list.swtichCardSeconds+'秒后可付款';
								}else{
									this.yzmBtnTxt1 = '更换银行卡时间剩余'+this.list.swtichCardSeconds+'秒';
								}
								if(res.result.status==0){//未支付
									if(this.buyerAccountId==this.userInfo.id){
										this.statusTxt='确定付款后--点击--我已付款成功'
									}else{
										this.statusTxt='买家尚未付款'
									}
								}
								if(res.result.status==1){//已支付
									if(this.buyerAccountId==this.userInfo.id){
										this.statusTxt='等待卖家确认收款'
									}else{
										this.statusTxt='买家已付款'
									}
								}
								if(res.result.status==2){//确认收款
									this.statusTxt='订单交易完成'
								}
								if(res.result.status==3){
									this.yzmBtnTxt = '订单已取消';
								}else{
									this.yzmBtnTxt = '';
								}
							}
						})
					}

					clearInterval(this.clock); //清除js定时器
				}
			},
			doLoop1:function(){
				var that=this
				if(that.list.swtichCardSeconds > 0){
					that.list.swtichCardSeconds -= 1;
					if(that.buyerAccountId==that.userInfo.id){
						that.yzmBtnTxt1 = that.list.swtichCardSeconds+'秒后可付款';
					}else{
						that.yzmBtnTxt1 = '更换银行卡时间剩余'+that.list.swtichCardSeconds+'秒';
					}
				}else{
					if(that.list.swtichCardSeconds == 0){
						http.post('/api/purchase/getTradeDetail',{tradeId:this.tradeId}).then(res => {
							if (res.code == 200 && res.result) {
								this.list=res.result
								if(this.buyerAccountId!=this.userInfo.id){
									this.list.swtichCardSeconds=this.list.swtichCardSeconds-5
								}
								if(this.buyerAccountId==this.userInfo.id){
									this.yzmBtnTxt1 = this.list.swtichCardSeconds+'秒后可付款';
								}else{
									this.yzmBtnTxt1 = '更换银行卡时间剩余'+this.list.swtichCardSeconds+'秒';
								}
								if(res.result.status==0){//未支付
									if(this.buyerAccountId==this.userInfo.id){
										this.statusTxt='确定付款后--点击--我已付款成功'
									}else{
										this.statusTxt='买家尚未付款'
									}
								}
								if(res.result.status==1){//已支付
									if(this.buyerAccountId==this.userInfo.id){
										this.statusTxt='等待卖家确认收款'
									}else{
										this.statusTxt='买家已付款'
									}
								}
								if(res.result.status==2){//确认收款
									this.statusTxt='订单交易完成'
								}
							}
						})
					}
					clearInterval(this.clock1); //清除js定时器
					that.yzmBtnTxt1 = '订单已取消';
				}
			}
		}
	}
</script>

<style>
	.tit{
		padding: 4vw;
		color: #999999;
		font-size: 3.8vw;
	}
	.tit>view:nth-child(1){
		font-size: 5vw;
		font-weight: bold;
		color: #333333;
		margin-bottom: 1vw;
	}
	.tit>view:nth-child(2) span{
		color: #007AFF;
		margin-left: 2vw;
	}
	.money{
		color: #007AFF;
		font-size: 5vw;
		font-weight: bold;
	}
	.content{
		padding: 4vw;
		font-size: 3.8vw;
	}
	.content>view{
		padding: 2vw 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.btnList{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 4vw;
		font-size: 3.8vw;
	}
	.btnList>view{
		padding: 2vw 0;
		border-radius: 1vw;
		text-align: center;
		width: 47%;
		border: 1px solid #999999;
	}
	.fkBtn{
		width: 84%;
		padding: 4vw 0;
		font-size: 3.5vw;
		border-radius: 1.8vw;
		background-image: linear-gradient(45deg, #24EBA9, #10C7B2);
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
	}
</style>
